<template>
	<view class="shop-address">
		    <view class="address-detail">
		      <van-field
		        :value="newAddress.name"
		        label="收货人"
		        size="large"
		        maxlength="10"
		        placeholder="收货人姓名"
				:error-message="errorMessageName"
		        required
				clearable
				@change="hanldeName"
		      />
		      <van-field
		        :value="newAddress.tel"
		        label="联系电话"
		        size="large"
		        type="digit"
		        maxlength="11"
		        placeholder="收货人手机号"
		        required
				clearable
				:error-message="errorMessagePhone"
				@change="hanldePhone"
		      />
		      <van-field
		        readonly
		        clickable
				required
		        size="large"
				:error-message="errorMessageArea"
		        :value="newAddress.area"
		        label="选择地区"
		        placeholder="点击选择省市区"
		        @click-input="openShowPicker"
		      />
		     
		      <van-field
		        :value="newAddress.address"
				@change="hanldeAddress"
		        label="详细地址"
		        size="large"
				autosize
		        maxlength="50"
		        type="textarea"
		        show-word-limit
		        placeholder="请输入详细地址"
				:error-message="errorMessageAddress"
		        required
		      />
		   </view>
		  <view class="btn-fiexd"><u-button @click="saveAddress" style="width: 80vw;" shape='circle' type="primary">保存</u-button></view> 
	      <u-picker mode="region"  @confirm="handleChooseArea" v-model="showPicker" :default-region='defaultRegion'></u-picker>
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				isEdit:0,
				defaultRegion:["福建省","福州市","仓山区"],
				id:0,
				province:"",
				city:"",
				area:"",
				newAddress:{
					name:"",
					tel:"",
					area:"",
					address:""
				},
				showPicker:false,
				errorMessagePhone:"",
				errorMessageName:"",
				errorMessageArea:"",
				errorMessageAddress:""
			}
		},
		methods: {
			openShowPicker(){
				if(this.province&&this.city&&this.area){
					this.defaultRegion=[this.province,this.city,this.area];
				}
				this.showPicker=true
			},
			handleChooseArea(e){
				this.province=e.province.label
				this.city=e.city.label
				this.area=e.area.label
				this.newAddress.area=`${e.province.label} ${e.city.label} ${e.area.label}`
				this.errorMessageArea="";
			},
			saveAddress(){
				 if (!this.newAddress.name) {
				        this.errorMessageName="收货人姓名不能为空！";
				        return;
				      }
				      if (!this.newAddress.tel) {
						this.errorMessagePhone="联系电话不能为空！";
				        return;
				      }
					  if(!this.$u.test.mobile(this.newAddress.tel)){
					  	this.errorMessagePhone="请输入正确的手机号码！"
						return;
					  }
				      if (!this.newAddress.area) {
				        this.errorMessageArea="请选择地区！";
				        return;
				      }
				      if (!this.newAddress.address) {
				        this.errorMessageAddress="请填写详细地址！";
				        return;
				      }
				if(!this.isEdit){
					var obj={connector:this.newAddress.name,phone:this.newAddress.tel,
					province:this.province,city:this.city,region:this.area,address:this.newAddress.address}
					api.SM_SHIPPING_ADDRESS_SAVE(JSON.stringify(obj)).then((res)=>{
						if(res.data.header.result_code==0){
							uni.showToast({
								title: "添加成功！",
								icon:'success',
								duration:1000
							})
							  setTimeout(()=>{
								  uni.navigateBack();
							  },1000)
						}
					})
				}
				else {
					var obj={connector:this.newAddress.name,phone:this.newAddress.tel,id: this.id,
					province:this.province,city:this.city,region:this.area,address:this.newAddress.address}
					api.SM_SHIPPING_ADDRESS_UPDATE(JSON.stringify(obj)).then((res)=>{
						if(res.data.header.result_code==0){
							uni.showToast({
								title: "更新成功！",
								icon:'success',
								duration:1000
							})
							  setTimeout(()=>{
								  uni.navigateBack();
							  },1000)
						}
					})
				}
			},
			hanldeName(e){
				this.newAddress.name=e.detail
				if(e.detail){
					this.errorMessageName=""
				}
			},
			hanldeAddress(e){
				this.newAddress.address=e.detail
				if(e.detail){
					this.errorMessageAddress=""
				}
			},
			hanldePhone(e){
				this.newAddress.tel=e.detail
				if(e.detail){
					var text=String(e.detail)
					if(!this.$u.test.mobile(text)){
						this.errorMessagePhone="请输入正确的手机号码！"
					}
					else {
						this.errorMessagePhone=""
					}
				}
				else {
					this.errorMessagePhone=""
				}
			},
		},
		onLoad(e) {
			if(e.isEdit){
				this.isEdit=e.isEdit
				uni.setNavigationBarTitle({
				    title: "编辑地址"
				});
				this.id=JSON.parse(e.item).id
				this.newAddress.name=JSON.parse(e.item).connector
				this.newAddress.address=JSON.parse(e.item).address
				this.newAddress.area=JSON.parse(e.item).province+JSON.parse(e.item).city+JSON.parse(e.item).region
				this.newAddress.tel=JSON.parse(e.item).phone
				this.city=JSON.parse(e.item).city
				this.province=JSON.parse(e.item).province
				this.area=JSON.parse(e.item).region
			}
			else {
				uni.setNavigationBarTitle({
				    title: "新增地址"
				});
			}
		}
	}
</script>

<style lang="scss">
	.btn-fiexd{
		margin-top: 60rpx;
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	/deep/.shop-address {
	  padding: 5vw 0 0 0;
	  background: #f5f7f9;
	  min-height: 100vh;
	  color: #434343;
	  font-size: 5vw;
	  .van-field--error .van-field__control,
	  .van-field--error .van-field__control::placeholder {
	    color: #999;
	    -webkit-text-fill-color: currentColor;
	  }
	  .address-title {
	    padding-left: 5vw;
	    font-weight: bold;
	  }
	  .address-detail {
	    background: #fff;
	    border-radius: 4vw;
	    margin-top: 3vh;
	    box-shadow: 0px 0px 12px 0px rgba(78, 92, 117, 0.08);
	    .van-field:first-child {
	      border-radius: 4vw 4vw 0 0;
	    }
	    .van-field:last-child {
	      border-radius: 0 0 4vw 4vw;
	    }
	    .van-cell {
	      .van-field__label {
	        width: 80px;
	        font-weight: bold;
	        color: #333;
	      }
	    }
	  }
	}
</style>
